<template>
    <div>
        <Card>
            <h1>生成代码设置</h1>
            <Form ref="formInline" :model="formData" :rules="rules" inline :label-width="80">
                <FormItem label="驱动" prop="driver">
                    <Select v-model="formData.driver" filterable style="width: 175px">
                        <OptionGroup label="Mysql">
                            <Option value="1">com.mysql.jdbc.Driver</Option>
                            <Option value="2" disabled>com.mysql.cj.jdbc.Driver</Option>
                        </OptionGroup>
                        <OptionGroup label="Oracle">
                            <Option value="3" disabled>oracle.jdbc.driver.OracleDriver</Option>
                        </OptionGroup>
                        <OptionGroup label="SQL Server">
                            <Option value="4" disabled>com.microsoft.sqlserver.jdbc.SQLServerDriver</Option>
                        </OptionGroup>
                    </Select>
                </FormItem>
                <FormItem label="URL" prop="url">
                    <Input type="text" v-model="formData.url" placeholder="">
                    </Input>
                </FormItem>
                <FormItem label="用户名" prop="username">
                    <Input type="text" v-model="formData.username" placeholder="">
                    </Input>
                </FormItem>
                <FormItem label="密码" prop="password">
                    <Input type="password" v-model="formData.password" placeholder="">
                    </Input>
                </FormItem>
                <FormItem label="模块名" prop="businessName">
                    <Input type="text" v-model="formData.businessName" placeholder="">
                    </Input>
                </FormItem>
                <FormItem label="表名" prop="tableName">
                    <Input type="text" v-model="formData.tableName" placeholder="">
                    </Input>
                </FormItem>
                <FormItem label="版本" prop="version">
                    <Input type="text" v-model="formData.version" placeholder="V1.0">
                    </Input>
                </FormItem>
                <FormItem label="作者" prop="author">
                    <Input type="text" v-model="formData.author" placeholder="">
                    </Input>
                </FormItem>
                <FormItem label="描述信息" prop="description">
                    <Input type="text" v-model="formData.description" placeholder="">
                    </Input>
                </FormItem>
                <FormItem>
                    <Button type="primary" icon="md-hammer" @click="generateCode">生成代码</Button>&nbsp;
                    <Button type="success" icon="md-archive" @click="download">下载</Button>
                </FormItem>
            </Form>
            <h1>在线预览生成代码</h1>
            <Collapse>
                <Panel name="1">
                    Mapper.xml
                    <div class="my-code" slot="content">
                        <Icon class="my-copy" type="md-copy" @click="copy(code1)"/>
                        <pre v-text="code1"></pre>
                    </div>
                </Panel>
                <Panel name="2">
                    Entity.java
                    <div class="my-code" slot="content">
                        <Icon class="my-copy" type="md-copy" @click="copy(code2)"/>
                        <pre v-text="code2"></pre>
                    </div>
                </Panel>
                <Panel name="3">
                    Mapper.java
                    <div class="my-code" slot="content">
                        <Icon class="my-copy" type="md-copy" @click="copy(code2)"/>
                        <pre v-text="code2"></pre>
                    </div>
                </Panel>
                <Panel name="4">
                    Service.java
                    <div class="my-code" slot="content">
                        <Icon class="my-copy" type="md-copy" @click="copy(code2)"/>
                        <pre v-text="code2"></pre>
                    </div>
                </Panel>
                <Panel name="5">
                    ServiceImpl.java
                    <div slot="content">
                        <Icon class="my-copy" type="md-copy" @click="copy(code2)"/>
                        <pre v-text="code2"></pre>
                    </div>
                </Panel>
                <Panel name="6">
                    Controller.java
                    <div class="my-code" slot="content">
                        <Icon class="my-copy" type="md-copy" @click="copy(code2)"/>
                        <pre v-text="code2"></pre>
                    </div>
                </Panel>
                <Panel name="7">
                    Vue
                    <div class="my-code" slot="content">
                        <Icon class="my-copy" type="md-copy" @click="copy(code2)"/>
                        <pre v-text="code2"></pre>
                    </div>
                </Panel>
            </Collapse>
        </Card>
    </div>
</template>

<script>
    export default {
        name: "Generate",
        data() {
            return {
                formData: {},
                rules: {},
                code1: "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n" +
                    "     <!DOCTYPE mapper PUBLIC \"-//mybatis.org//DTD Mapper 3.0//EN\"\n" +
                    "            \"http://mybatis.org/dtd/mybatis-3-mapper.dtd\">\n" +
                    "     <mapper namespace=\"com.plj.mapper.DemoMapper\">\n" +
                    "     </mapper>\n" +
                    " </xml>",
                code2: "  @Data\n" +
                    "    @TableName(value = \"plj_demo\")\n" +
                    "    public class Demo extends BaseEntity implements Serializable{\n" +
                    "           private static final long serialVersionUID = 1L;\n" +
                    "           //备注\n" +
                    "           private String note;\n" +
                    "    }"
            }
        },
        created() {

        },
        methods: {
            copy(code) {
                /************* 复制代码（start） *************/
                let url = code;
                let oInput = document.createElement('input');
                oInput.value = url;
                oInput.style.display = "none";
                document.body.appendChild(oInput);
                oInput.select(); // 选择对象;
                document.execCommand("Copy"); // 执行浏览器复制命令
                /************* 复制代码（end） *************/
                this.$layer.msg("复制代码成功", {icon: 1, time: 3});
            },
            generateCode() {
                this.$layer.msg("开发进行中", {icon: 1, time: 3});
            },
            download() {
                this.$layer.msg("开发进行中", {icon: 1, time: 3});
            },
        }
    }
</script>

<style scoped>
    .my-copy {
        float: right;
        display: inline-block;
        padding: 2px 5px;
    }
</style>
